<template>
    <div class="PaymentCode">
        <div class="container f-row f-j-between f-a-start">
            <span class="title">支付宝收款码</span>
            <img v-if="alipay" :src="alipay" alt="" @click="alipayUpload">
            <div v-else class="upload f-column f-j-center f-a-center active-black" @click="alipayUpload">
                <gy-icon font-name="icon-paizhao"/>
                <span>上传图片</span>
            </div>
        </div>
        <div class="container f-row f-j-between f-a-start">
            <span class="title">微信收款码</span>
            <img v-if="wepay" :src="wepay" alt="" @click="wepayUpload">
            <div v-else class="upload f-column f-j-center f-a-center active-black" @click="wepayUpload">
                <gy-icon font-name="icon-paizhao"/>
                <span>上传图片</span>
            </div>
        </div>
        <div class="container">
            <div class="row f-row f-j-between f-a-center"><span class="title flex-1" style="display: inline-block;">银行卡收款</span> <input class="flex-1" style="width: 4.0rem;" type="text" v-model="bankName" placeholder="银行名称"></div>
            <div class="row f-row f-j-between f-a-center"><input class="flex-1" type="text" v-model="name" placeholder="收款人姓名"></div>
            <div class="row f-row f-j-between f-a-center"><input class="flex-1" type="text" v-model="bankNumber" placeholder="银行卡号"></div>
        </div>
        <div class="bottom f-row f-j-center f-a-center">
            <div class="submitButton" @click="didClick">确定</div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import GyIcon from "@/components/GyIcon.vue";
import {NAV_BAR_INFO} from "@/store/MutationTypes";
import {RequestResult} from "@/common/Request";
@Component({
    name: 'PaymentCode',
    components: {GyIcon}
})
export default class extends Vue {
    // 支付宝
    private alipay: string | null = require('../../assets/logo.png');
    // 微信
    private wepay: string | null = null;
    // 银行名称
    private bankName: string | null = null;
    // 收款人姓名
    private name: string | null = null;
    // 银行卡号
    private bankNumber: string | null = null;

    private mounted(): void {
        let __this = this;
        this.$common.scrollToTop();
        this.$store.dispatch(NAV_BAR_INFO, {
            leftItem: {name: '返回', click: () => {
                    __this.$router.push('/setting');
                }}
        })
    }
    private alipayUpload(): void {
        this.$request.fileUpload().then((r: RequestResult) => {
            console.log(r);
        })
    }
    private wepayUpload(): void {
        this.$request.fileUpload().then((r: RequestResult) => {
            console.log(r);
        })
    }
    private didClick(): void {

    }
}
</script>

<style scoped lang="less">
.PaymentCode {
    padding: 0.2rem 0.3rem 1.8rem 0.3rem;
    & .container {
        background-color: white;
        padding: 0.3rem 0.36rem;
        margin-bottom: 0.2rem;
        & .title {
            font-size: 0.3rem;
        }
        & img {
            width: 1.6rem;
            height: auto;
            min-height: 1.6rem;
            margin-right: 0.3rem;
        }
        & .upload {
            width: 1.6rem;
            height: 1.6rem;
            border-radius: 0.1rem;
            border: 0.02rem dashed #979797;
            margin-right: 0.3rem;
            & span {
                font-size: 0.24rem;
            }
        }
        & .row {
            margin-bottom: 0.2rem;
            & input {
                display: inline-block;
                text-align: center;
                width: 6.3rem;
                padding: 0.3rem 0.2rem;
                background-color: #FAFAF7;
                outline: none;
                border: none;
                border-radius: 0.1rem;
            }
        }
    }
    & .bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1.74rem;
        background-color: white;
        z-index: 2;
        &:after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            height: 1px;
            background-image: linear-gradient(
                    0deg,
                    transparent 61%,
                    rgba(0, 0, 0, 0.3) 100%
            );
        }

    }
}
</style>
